@import "common/common";
.alert-tips-layout{
	position: fixed;
	left: -100%;
	top: 0;
	width: 100%;
	z-index: 100;
	.alert-tips{
		position: fixed;
		top: -100%;
		left: 30px;
		right: 30px;
		padding:18px 20px;
		min-height:55px;
		font-size: 16px;
		color: #fff;
		line-height: 22px;
		box-sizing:border-box;
		text-align: center;
		background-color: rgba(0,0,0,0.6);
		border-radius: 4px;
		@include transform( scale(0) translateZ(0));
		@include transition( transform linear 0.2s ,top linear 0s 0.2s);
		z-index: 99;
	}
	.alert-tips-success,.alert-tips-loading{
		position: fixed;
		top: -100%;
		left: 50%;
		@include display-flex;
		@include flex-direction(column);
		@include justify-content(center);
		@include align-items(center);
		width:140px;
		height:110px;
		background-color: rgba(0,0,0,0.6);
		z-index: 99;
		@include opacity(0);
		@include transform(translateX(-50%));
		@include transition( opacity linear 0.1s);
		border-radius: 4px;
		.success-white-icon{
			display: inherit;
		}
		.loading-icon{
		    width: 34px;
		    height: 34px;
		    @include backgroundImage("common/loading-icon.gif");
		    background-size: center;
		    background-repeat: no-repeat;
		}
		.text{
			margin-top: 16px;
			font-size: 16px;
			color: #fff;
			text-align: center;
		}
	}
	&.modal{
		z-index: 99;
	}
	&.loading{
		left: 0;
		.alert-tips-loading{
			top: 30%;
			@include opacity(1);
		}
	}
	&.success{
		left: 0;
		.alert-tips-success{
			top: 30%;
			@include opacity(1);
		}
	}
	
	&.show{
		left: 0;
		.alert-tips{
			top: 30%;
			@include transform( scale(1) translateZ(0));
			@include transition(left linear 0s 0.2s, transform linear 0.2s)
		}
		
	}
}
